import React, { Component } from 'react'
import { Button } from 'antd'

const Context = React.createContext();

// Context.Provider 逻辑层(数据中心)

// Context.Consumer 展示层(接受数据, 消费数据)

const WithConsumer = Comp => props => {
    return (
        <Context.Consumer>
            { value => <Comp {...props} {...value} /> }
        </Context.Consumer>
    )
}

class MyButton extends Component {

    static contextType = Context

    render() {
        const { name, change } = this.context
        console.log(this.context)
        return (
            <Button onClick={change} >
                {name}
            </Button>
        )
    }
}

// MyButton = WithConsumer(MyButton)

class MyFrom  extends Component {
    render() {
        return (
            <div>
                Form
                <MyButton />
            </div>
        )
    }
}

class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'xinglong.shi',
            change: this.change
        }
    }

    change = () => {
        this.setState({
            name: 'xinglong.shi - ' + Math.random()
        })
    }

    render() {
        return (
            <Context.Provider value={this.state}>
                <div>
                    Context
                    <MyFrom />
                </div>
            </Context.Provider>
        )
    }
}



export default App